/**
*@description 折线图
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';

// let onChartReady = function(chart) {
//   'chart.hideLoading()'
// }

const LineMarker2 = ({width, height, data, loading, dispatch }) => {
  if(!data || (data.value && data.value.length<=0)){return (<div className="emptyData">暂无数据</div>)}
  //data = {legend:[], name:"", category:[], value:[], name2:"", value2:[], markLine: false};
  // 存在不确定个数的线条。
    let moreData = [];
    if(data.legend.length>2){
        data.legend.map(function(item, index){
            moreData.push({
                name:item,
                type:'line',
                data:data["value"+index]
            })
        })
    };

  let option = {
    tooltip: {
        trigger: 'axis'
    },
    //grid:[{x: '15%'}],
    color:'#fff',
    textStyle:{
        color:'#fff'
    },
    legend: {
        orient: 'vertical',
        right: 'right',
        center: 'center',
        itemWidth:20,
        padding:[150, 0, 10, 50],
        data: data.legend,
        textStyle:{
            color:'#fff'
        }
    },
    toolbox: {
        show: true,
        // itemSize:25,
        // iconStyle:{
        //     normal:{
        //         borderColor:'#bdbdbd'
        //     }
        // },
        right:20,
        feature: {
            //restore: {},
            saveAsImage: {backgroundColor:'#000000', icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}
        }
    },
    xAxis:  {
        type: 'category',
        axisTick:{
            show:false
        },
        axisLine:{
            lineStyle:{
                color:'#bdbdbd'
            }
        },
        //boundaryGap: false,
        data: data.category
    },
    yAxis: {
        type: 'value',
        max:data.max,
        splitLine:{
            show:false
        },
        axisLine:{
            lineStyle:{
                color:'#bdbdbd'
            }
        },
        axisTick:{
            lineStyle:{
                color:'#bdbdbd'
            }
        },
        /*axisLabel: {
            formatter: '{value} W'
        }*/
    },
    series: moreData.length>0? moreData : data.name2 && data.value2.length>0?[
        {
            name:data.name || "",
            type:'line',
            data:data.value || []
        },
        {
            name:data.name2 || "",
            type:'line',
            data:data.value2 || []
        }
    ]:
    [
        {
            name:data.name || "",
            type:'line',
            symbol:'none', // 去除折线上的点
            lineStyle:{
                normal:{
                    width:0.5
                }
            },
            markLine: data.markLine && {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            } || {},
            data:data.value || []
        },
    ]
};

  return (
    <div>
      <ReactEcharts
            option={option} 
            style={{width:width, height: height}}
            theme={"theme_name"}
            showLoading={loading} />
    </div>
  );
};

LineMarker2.propTypes = {
    width:PropTypes.string.isRequired,
    height:PropTypes.number.isRequired,
    loading:PropTypes.bool,
    data: PropTypes.object//.isRequired // 格式：{name:"", category:[], value:[]}
};

export default connect()(LineMarker2);